<template>
    <div class="template-A">
        <div>
            <el-form ref="ruleFormRef" :model="ruleForm" label-width="auto" class="demo-ruleForm">
                <div style="display: flex;">
                    <el-form-item label="模板名称">
                        <el-input v-model="ruleForm.name" placeholder="请输入" style="width: 300px;" />
                    </el-form-item>
                    <el-form-item label="模板名称" style="margin-left: 200px;">
                        <el-select v-model="ruleForm.format" class="!w-300px" clearable placeholder="请选择">
                            <el-option v-for="item in symbolList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 300px;">
                        <el-button type="primary" @click="onLookup">查询</el-button>
                        <el-button @click="onReset">重置</el-button>
                    </el-form-item>
                </div>
                <div style="display: flex; margin-top: 30px;">
                    <el-form-item label="模板类型">
                        <el-select v-model="ruleForm.type" class="!w-300px" clearable placeholder="请选择">
                            <el-option v-for="item in typeList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否产出" style="margin-left: 200px;">
                        <el-select v-model="ruleForm.whether" class="!w-300px" clearable placeholder="请选择">
                            <el-option v-for="item in whetherList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display: flex; margin-top: 30px;">
                    <el-button type="primary">新增</el-button>
                    <el-button type="primary">删除</el-button>
                    <el-button type="primary">下载</el-button>
                    <el-button type="primary">测试</el-button>
                </div>
            </el-form>
            <div style="margin-top: 30px">
                <el-table :data="tableData" style="width: 100%" show-header @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="templateName" label="模板名称" align="center" width="350" show-overflow-tooltip />
                    <el-table-column prop="order" label="顺序" align="center" />
                    <el-table-column prop="templateType" label="模板类型" align="center" />
                    <el-table-column prop="whether" label="幅面" align="center" />
                    <el-table-column label="产出" align="center">
                        <template #default="{ row }">
                            <el-switch v-model="row.ifSwitch" class="mt-2" style="margin-left: 24px" inline-prompt
                                :active-icon="Check" :inactive-icon="Close" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="share" label="共享" align="center" />
                    <el-table-column prop="maintainName" label="维护人" align="center" />
                    <el-table-column prop="company" label="维护人所属单位" align="center" />
                    <el-table-column label="操作" align="center">
                        <template #default="{ row }">
                            <el-button @click="view(row)">查看</el-button>
                            <el-button @click="edit(row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 30px;">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Check, Close } from '@element-plus/icons-vue'
const ruleForm = ref({
    templateName:'',
    format:'A1',
    type:'common',
    whether:'true',
    
})

const symbolList = ref([
    { value: 'A1', label: 'A1' },
    { value: 'A2', label: 'A2' },
    { value: 'A3', label: 'A3' },
])

const typeList = ref([
    { value: 'common', label: '公用' },
    { value: 'proper', label: '私用' },
])

const whetherList = ref([
    { value: 'true', label: '是' },
    { value: 'fales', label: '否' },
])

// 表格数据
const tableData =ref([
    {
        templateName: '1_震中周边基本信息图A3',
        order: '1',
        templateType: '公用',
        whether: 'A3',
        ifSwitch:true,
        share: '是',
        maintainName: '国家级管理员',
        company: '中国地震台网中心',
    },
    {
        templateName: '1_震中周边基本信息图A3',
        order: '1',
        templateType: '公用',
        whether: 'A3',
        ifSwitch:false,
        share: '是',
        maintainName: '国家级管理员',
        company: '中国地震台网中心',
    }
])
// 分页
const currentPage = ref('1')
const pageSize = ref('10')
const size = ref('default')
const disabled = ref(false)
const background = ref(false)
const total = ref('100')

//分页切换
const handleSizeChange = (val) => {
    console.log(val);
};
const handleCurrentChange = (val) => {
    console.log(val);
}


const onLookup = () => {
    console.log('查询');
}   
const onReset = () => {
    console.log('重置');
}
// 开关状态
onMounted(() => {
   
})
</script>

<style scoped></style>
